import thin_render from "./thin_render.mjs";
import viewmode from "./viewmode.mjs";
import datarover from "./datarover.mjs";
import render_content from "./render_content.mjs";
import { thin } from "../thin3.mjs";
import { StringFormat } from "./string_format.mjs";
import { nearest_osspath } from "./nearest.mjs";

/**
 * 字段模板生成函数 - 用于动态创建和渲染表单字段
 * @param {HTMLElement} container - 容器元素，用于放置生成的字段
 * @param {Object} template - 字段模板配置对象，包含字段的所有配置信息
 *                           包括：field(字段名)、type(类型)、colspan(列数)、
 *                           readonly(只读)、defaultvalue(默认值)等
 */
export default function field_template(container, template) {
  let field;

  // 根据colspan属性创建不同类型的字段容器
  // F1: 单列字段(默认)
  // F2: 双列字段
  // F3: 三列字段
  // F0: 无列字段(不显示label)
  switch (template?.colspan) {
    case 2:
      field = document.createElement("F2");
      break;
    case 3:
      field = document.createElement("F3");
      break;
    case 0:
      field = document.createElement("F0");
      break;
    default:
      field = document.createElement("F1");
      break;
  }
  container.appendChild(field);

  // 如果不是无列字段(colspan !== 0)，则创建label标签
  if (template.colspan !== 0) {
    let label = document.createElement("label");
    field.appendChild(label);
    thin_render(label, template.title || template.field);
    label.title = template.title || template.field;
  }

  // 获取当前视图模式(edit/view)
  let vm = viewmode(field);

  // 处理特殊字段类型：对象或数组
  if (typeof template.field === "object") {
    thin_render(field, template.field);
  } else if (Array.isArray(template.field)) {
    thin_render(field, template.field);
  }
  // 处理可编辑模式
  else if ((!template.readonly && vm === "edit") || vm === "insert") {
    // 设置默认值(如果有且当前值未定义)
    if (template.defaultvalue !== undefined) {
      if (datarover(field, template.field) === undefined) {
        datarover(field, template.field, template.defaultvalue);
      }
    }

    // 根据字段类型渲染不同的输入控件
    switch (template.type) {
      case "textarea":
        // 渲染多行文本输入框
        thin_render(field, {
          textarea: template.field, // 字段名
          bind: template.field, // 数据绑定
          a: template.a, // 额外属性
          required: template.required, // 是否必填
          event: template.event, // 事件处理
        });
        break;
      case "checkbox":
        // 渲染复选框控件
        thin_render(field, {
          input: template.field,
          bind: template.field,
          a: template.a,
          type: "checkbox", // 输入类型
          required: template.required, // 是否必填
          event: template.event, // 事件处理
        });
        break;
      case "select":
        // 渲染下拉选择框
        // 支持通过ajax动态加载选项或静态options
        thin_render(field, {
          select: template.field,
          a: template.a,
          bind: template.field,
          ajax: template.ajax, // ajax配置，用于动态加载选项
          options: template.options, // 静态选项配置
          required: template.required, // 是否必填
          event: template.event, // 事件处理
          text: template.text,
          value: template.value,
        });
        break;
      default:
        // 渲染默认的输入框
        // 支持各种HTML5输入类型(text, number, date等)
        if (template.type === "file") {
          console.log({ template });
        }

        thin_render(field, {
          input: template.field,
          id: template.field,
          value: template.value, // 初始值
          a: { ...template.a, ...{ type: template.type } }, // 合并输入类型
          bind: template.field,
          ajax: template.ajax,
          required: template.required, // 是否必填
          click: template.click, // 点击事件处理
          event: template.event, // 其他事件处理
          multiple: template.multiple,
          path: template.path,
        });
        break;
    }
  } else {
    // 查看模式下的字段渲染
    if (template.ajax && template.ajax.param) {
      // 通过ajax获取显示内容的情况
      // 例如：需要根据ID查询显示名称等
      let query = {};

      // 处理ajax查询参数
      for (let item in template.ajax.query) {
        if (typeof template.ajax.query[item] === "string") {
          query[item] = render_content(container, template.ajax.query[item]);
        }
      }

      // 添加主参数
      query[template.ajax.param] = datarover(field, template.field);

      // 发送ajax请求获取显示内容
      thin
        .ajax({
          url: template.ajax.url,
          type: template.ajax.method || "POST",
          data: query,
        })
        .done((data) => {
          let rows = datarover(data, template.ajax.datapath);
          // 如果返回单条数据，直接显示
          if (rows.length === 1) {
            thin_render(field, {
              span: render_content(rows[0], template.ajax.text),
              click: template.click,
              event: template.event,
            });
          } else {
            // 否则显示字段名
            thin_render(field, {
              span: template.text || "[[".concat(template.field, "]]"),
              click: template.click,
              event: template.event,
            });
          }
        });
    } else if (template.type === "file") {
      let content = datarover(field, template.field);
      // let osspath = nearest_osspath(field);

      let param = Object.fromEntries(
        Object.entries(template.download?.param || {}).map(([key, value]) => {
          if (typeof value === "string") {
            return [key, render_content(field, value)];
          }
          return [key, value];
        })
      );
      console.log({ param });
      let href = template.download
        ? `${template.download.api}?${thin.serialize({
            ...param,
            ...(template.path ? { path: template.path } : {}),
            ...{
              field: template.field,
              filename: "[[name]]",
            },
          })}`
        : "";
      console.log({ href });
      thin_render(field, {
        ul: [
          {
            li: {
              if: template.download,
              then: { a: "[[name]]", href },
              else: "[[name]]",
            },
            data: content,
          },
        ],
      });

      // thin_render(field, {
      //   span: t,
      //   data: content,
      // });
    } else {
      // 直接显示字段值的情况
      // 支持数字格式化和日期时间格式化
      thin_render(field, {
        span:
          template.text ||
          StringFormat({
            content: datarover(field, template.field),
            NumberFormat: template.NumberFormat, // 数字格式化配置
            DateTimeFormat: template.DateTimeFormat, // 日期时间格式化配置
          }),
        click: template.click,
        event: template.event,
      });
    }
  }
}
